<div class="hidden">
    <div id="dialog" title="Widget settings">
        <ul>
            <li>
                <label>Name</label><br />
                <input type="text" name="title" value=""/>
            </li>
            <li>
                <label>Id</label><br />
                <input type="text" name="id" value=""/>
            </li>
            <li>
                <label>Resource (url/route)</label><br />
                <input type="text" name="resource" value=""/>
            </li>
            <li>
                <input type="checkbox" name="iframe" id="iframe" value="1"/>
                <label for="iframe">Iframe</label>
            </li>
        </li>
    </div>
</div>
<style>
.hidden {
    display: none;
}
#content {
    height: 500px;
}
.dashboard-widget {
    padding:10px;
    position:absolute;
    top:0%;
    left:0%;
    width:0px;
    height:300px;
    margin-left:0px;
    margin-top:0px;
    text-align:center;
    opacity:0.8;
    filter:alpha(opacity=80);
}
.dashboard-widget iframe {
    width:100%;
    height: 100%;
    border: none;
}
.dashboard-widget .header {
    height: 20px;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: -21px;
    width: 100%;
}
.dashboard-widget .header .removeWidget {
    float: right;
}
</style>
<script>
$(function() {
    $('#content').dashboard();

});

</script>
</body>